<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>首页</title>
    <head th:include="include :: header"></head>
    <style type="text/css">
    </style>
</head>
<body>
<div id="app">
    <el-row>
        <el-col>
            <el-button type="primary" icon="el-icon-edit" @click="onCreateBtnClick">创建</el-button>
        </el-col>
        <el-col>
            <el-table :data="taskTableData" highlight-current-row>
                <el-table-column prop="groupId" label="所属组织"></el-table-column>
                <el-table-column prop="artifactId" label="项目名"></el-table-column>
                <el-table-column prop="moduleName" label="模块名"></el-table-column>
                <el-table-column prop="packageName" label="包名"></el-table-column>
                <el-table-column prop="name" label="应用名"></el-table-column>
                <el-table-column prop="author" label="创建用户"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="onRowEditBtnClick(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="primary" size="mini" @click="onRowGeneratorBtnClick(scope.$index, scope.row)">生成代码</el-button>
                        <el-button size="mini" type="danger" @click="onRowDeleteBtnClick(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>

    <el-dialog :close-on-click-modal="false" :visible.sync="formDialog.visible" width="30%">
        <el-form :model="task" label-width="120px" size="small" ref="taskForm">
            <el-form-item label="所属组织" prop="groupId"><el-input v-model="task.groupId"></el-input></el-form-item>
            <el-form-item label="项目名" prop="artifactId"><el-input v-model="task.artifactId"></el-input></el-form-item>
            <el-form-item label="模块名" prop="moduleName"><el-input v-model="task.moduleName"></el-input></el-form-item>
            <el-form-item label="包名" prop="packageName"><el-input v-model="task.packageName" disabled></el-input></el-form-item>
            <el-form-item label="应用名" prop="name"><el-input v-model="task.name"></el-input></el-form-item>
            <el-form-item label="应用描述" prop="description"><el-input v-model="task.description"></el-input></el-form-item>
            <el-form-item label="创建用户" prop="author"><el-input v-model="task.author"></el-input></el-form-item>
            <el-form-item label="框架" prop="framework">
                <el-radio-group v-model="task.framework">
                    <el-radio label="mybatis">mybatis</el-radio>
                    <el-radio label="jpa">jpa</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="数据库类型" prop="dbType">
                <el-select v-model="task.dbType" placeholder="请选择数据库类型" style="width:100%;">
                    <el-option label="mysql" value="mysql"></el-option>
                    <el-option label="oracle" value="oracle"></el-option>
                    <el-option label="sqlserver" value="sqlserver"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="地址" prop="dbHost"><el-input v-model="task.dbHost"></el-input></el-form-item>
            <el-form-item label="端口" prop="dbPort"><el-input v-model="task.dbPort"></el-input></el-form-item>
            <el-form-item label="数据库" prop="dbSchema"><el-input v-model="task.dbSchema"></el-input></el-form-item>
            <el-form-item label="用户名" prop="dbUsername"><el-input v-model="task.dbUsername"></el-input></el-form-item>
            <el-form-item label="密码" prop="dbPassword"><el-input v-model="task.dbPassword"></el-input></el-form-item>
        </el-form>

        <div class="dialog-footer" slot="footer">
            <el-button @click="onFormDialogCancelClick" size="mini">取 消</el-button>
            <el-button @click="onFormDialogSubmitClick" size="mini" type="primary">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog :visible.sync="tableInfoListDialog.visible" width="30%">
        <el-table :data="tableInfoListData" @selection-change="onSelectionChange" size="mini">
            <el-table-column type="selection"></el-table-column></el-table-column>
            <el-table-column prop="name" label="name" ></el-table-column>
            <el-table-column prop="comment" label="comment"></el-table-column>
        </el-table>
        <a :href="downloadUrl" v-show="showDownloadUrl">点击此链接下载</a>
        <div class="dialog-footer" slot="footer">
            <el-button @click="tableInfoListDialog.visible = false" size="mini">关 闭</el-button>
            <el-button @click="onGenerateBtnClick" size="mini" type="primary">获取下载链接</el-button>
        </div>
    </el-dialog>

</div>

<script type="text/javascript">
    var app = new Vue({

        el: '#app',

        data: {
            activeIndex: 0,
            task: {
                groupId: 'com.chinaictc',
                artifactId: 'project',
                moduleName: 'module',
                packageName: 'com.chinaictc.project.module',
                name: '',
                description: '',
                author: 'lichunqing',

                dbType: 'mysql',
                dbHost: '127.0.0.1',
                dbPort: '3306',
                dbSchema: '',
                dbUsername: 'root',
                dbPassword: 'ahcccrjb',

                framework: 'mybatis',
            },
            taskTableData: [],
            formDialog: {
                type: '',
                visible: false
            },

            tableInfoListData: [],
            tableInfoListDialog: {
                visible: false
            },
            downloadUrl: '',
            showDownloadUrl: false
        },

        watch: {
            'task.groupId': function(val){
                this.task.packageName = this.task.groupId + '.' + this.task.artifactId + '.' + this.task.moduleName
            },
            'task.artifactId': function(val){
                this.task.packageName = this.task.groupId + '.' + this.task.artifactId + '.' + this.task.moduleName
            },
            'task.moduleName': function(val){
                this.task.packageName = this.task.groupId + '.' + this.task.artifactId + '.' + this.task.moduleName
            }
        },

        mounted: function(){
            this.getTaskTableData();
        },

        methods: {
            /**
             * request
             */

            getTaskTableData: function(){
                var self = this;
                var resp = axios.get('/task/list');
                resp.then(function(data){
                    self.taskTableData = data;
                })
            },
            save: function (params) {
                var self = this
                var resp = axios.post('/task/save', params)
                resp.then(function(){
                    self.$refs['taskForm'].resetFields()
                    self.$nextTick(function(){
                        self.$refs['taskForm'].resetFields()
                    })
                    self.formDialog.visible = false
                    self.getTaskTableData()
                })
            },
            update: function (params) {
                var self = this
                var resp = axios.post('/task/update', params)
                resp.then(function(){
                    self.$refs['taskForm'].resetFields()
                    self.$nextTick(function () {
                        self.$refs['taskForm'].resetFields()
                    })
                    self.formDialog.visible = false
                    self.getTaskTableData()
                })
            },
            remove: function(params){
                var self = this;
                var resp = axios.post('/task/remove', Qs.stringify(params, { arrayFormat: 'brackets' }));
                resp.then(self.getTaskTableData)
            },

            /**
             * event listener
             */
            onCreateBtnClick: function(){
                var self = this
                self.formDialog.visible = true
                self.formDialog.type = 'add'
                self.$refs['taskForm'].resetFields()
                self.$nextTick(function(){
                    self.$refs['taskForm'].resetFields()
                })
            },
            onRowEditBtnClick: function(index, row){
                var self = this
                this.formDialog.type = 'edit'
                this.formDialog.visible = true
                self.task = row
            },
            onRowDeleteBtnClick: function(index, row){
                this.remove({id: row.id})
            },
            onRowGeneratorBtnClick: function(index, row){
                var self = this
                this.tableInfoListDialog.visible = true
                this.showDownloadUrl = false
                _.assign(self.task, row)
                axios.get('/task/getSchemaInfo', {
                    params: row
                }).then(function(data){
                    self.tableInfoListData = data;
                })
            },
            /* 对话框取消事件*/
            onFormDialogCancelClick: function () {
                var self = this
                self.$refs['taskForm'].resetFields()
                self.$nextTick(function(){
                    self.$refs['taskForm'].resetFields()
                })
                this.formDialog.visible = false
            },
            /* 对话框表单提交事件 */
            onFormDialogSubmitClick: function () {
                var self = this
                if (this.formDialog.type === 'add') {
                    self.save(self.task)
                    return
                }
                if (this.formDialog.type === 'edit') {
                    self.update(self.task)
                    return
                }
            },

            onSelectionChange: function(selection){
                this.selectedTableNames = _.map(selection, 'name');
            },
            onGenerateBtnClick: function(){
                var self = this;
                if(_.size(self.selectedTableNames) === 0){
                    this.$message({
                        message: '请选择数据库表',
                        type: 'warning'
                    });
                    return;
                }
                var params = _.assign(self.task)
                params.selectedTableNames = self.selectedTableNames
                var promise = axios.post('/task/generate', Qs.stringify(params, { arrayFormat: 'brackets' }))
                promise.then(function(data){
                    self.downloadUrl = '/file/download?path=' + data
                    self.showDownloadUrl = true
                })
            },

        },
    });
</script>
</body>
</html>